<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('首页')"/>
    <!--    <link rel="stylesheet" th:href="@{/static/admin/css/other/console1.css}"/>-->
</head>
<body class="pear-container">
<div>
    <div class="layui-row layui-col-space10">

    </div>
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md9">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-row">
                        <div class="layui-col-md4">
                            <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                                <div id="echarts-records"
                                     style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
                            </div>
                        </div>
                        <div class="layui-col-md4">
                            <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                                <div id="echarts-records1"
                                     style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
                            </div>
                        </div>
                        <div class="layui-col-md4">
                            <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                                <div id="echarts-records2"
                                     style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">单位接种情况</div>
                <div class="layui-card-body">
                    <dl class="layuiadmin-card-status">
                        <dd>
                            <div class="layui-status-img">

                            </div>
                            <div>

                            </div>
                        </dd>
                    </dl>
                </div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">疫情公告</div>
                <!--                <div class="layui-card-body">-->
                <!--                    <ul class="list">-->
                <!--                        <li class="list-item" th:each=""><span class="title" th:text="">优化代码格式</span><span-->
                <!--                                class="footer" th:text="">2020-06-04 11:28</span></li>-->
                <!--                    </ul>-->
                <!--                </div>-->
            </div>
            <div class="layui-card">
                <div class="layui-card-header">
                    防疫链接发布
                </div>
                <!--                <div class="layui-card-body" th:each="">-->

                <!--                    <a target="_blank" th:href="" class="pear-btn layui-btn-fluid" th:text=""-->
                <!--                       style="height: 50px;line-height: 50px;"></a>-->
                <!--                    <br/>-->
                <!--                </div>-->
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<script>
    layui.use(['layer', 'echarts', 'element', 'count', 'topBar', 'code'], function () {
        layui.code();
        // let count = layui.count,
        echarts = layui.echarts;

        let MODULE_PATH = rootPath + "/YmjzController/";

        var echartsRecords1 = echarts.init(document.getElementById('echarts-records'), 'walden');
        var echartsRecords2 = echarts.init(document.getElementById('echarts-records1'), 'walden');
        var echartsRecords3 = echarts.init(document.getElementById('echarts-records2'), 'walden');
        var option1 = {
            title: {
                text: '第一针接种',
                subtext: '人数',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            series: [
                {
                    name: '第一针接种情况',
                    type: 'pie',
                    radius: '50%',
                    data: [{value: 100, name: '已接种人数'},
                        {value: 50, name: "未接种人数"}],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        var option2 = {
            title: {
                text: '第二针接种',
                subtext: '人数',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },

            series: [
                {
                    name: '第二针接种人数',
                    type: 'pie',
                    radius: '50%',
                    data: [{value: 100, name: '已接种人数'},
                        {value: 50, name: "未接种人数"}],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        var option3 = {
            title: {
                text: '第三针接种',
                subtext: '人数',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            series: [
                {
                    name: '第三针接种情况',
                    type: 'pie',
                    radius: '50%',
                    data: [{value: 100, name: '已接种人数'},
                        {value: 50, name: "未接种人数"}],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        echartsRecords1.setOption(option1);
        echartsRecords2.setOption(option2);
        echartsRecords3.setOption(option3);

        $.ajax({
            url: MODULE_PATH + 'eData',
            type: 'GET',
            data: {'value': 1},
            dataType: 'json',
            success: function (res) {
                if (res.code == 200) {
                    let num = res.data;
                    echartsRecords1.setOption({
                        series: [{
                            data: num
                        }]
                    })
                }
            }
        })
        $.ajax({
            url: MODULE_PATH + 'eData',
            type: 'GET',
            data: {'value': 2},
            dataType: 'json',
            success: function (res) {
                if (res.code == 200) {
                    let num = res.data;
                    echartsRecords2.setOption({
                        series: [{
                            data: num
                        }]
                    })
                }
            }
        })
        $.ajax({
            url: MODULE_PATH + 'eData',
            type: 'GET',
            data: {'value': 3},
            dataType: 'json',
            success: function (res) {
                if (res.code == 200) {
                    let num = res.data;
                    echartsRecords3.setOption({
                        series: [{
                            data: num
                        }]
                    })
                }
            }
        })
        window.onresize = function () {
            echartsRecords.resize();
        }

    });
</script>
</body>
</html>
